<template>
  <div class="item">
    <div class="swiper-wrapper">
      <img class="cover" :src="itemData.defaultPicture" alt="" />
      <div class="bottom">
        <div class="msg-tip">
          <div class="score">{{ itemData.commentBriefForCD.overall }}分</div>
          <div class="text">{{ itemData.commentBriefForCD.scoreTitle }}</div>
        </div>
      </div>
      <div class="side-bar">
        <div class="tool-bar">
          <img class="avatar" :src="itemData.logoUrl" alt="" />
          <img
            class="heart"
            src="@/assets/img/search/tj-mob-ui_unit-item_collected-new.png"
            alt=""
          />
          <div class="message">
            <img
              class="msg-icon"
              src="@/assets/img/search/tj-mob-ui_unit-item_comment-new.png"
              alt=""
            />
            <div class="count">{{ itemData.commentBriefForCD.totalCount }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div class="desc">
          <van-tag type="primary" color="#3F4954">{{ itemData.address }}</van-tag>
          <div class="name">{{ itemData.unitSummeries[0].text }}</div>
          <div class="desc">{{ itemData.unitSummeries[1].text }}</div>
        </div>
        <div class="house-name">{{ itemData.unitName }}</div>
      </div>
      <div class="info">
        <div class="tags">
          <template v-for="(item, index) in itemData.houseTags" :key="index">
            <van-tag type="primary" class="discount">{{ item.text }}</van-tag>
          </template>
        </div>
        <div class="price">
          <div class="new">¥{{ itemData.finalPrice }}</div>
          <div class="old">¥{{ itemData.productPrice }}</div>
          <van-tag round type="primary" color="#FB4A4A">{{ itemData.priceTipBadge?.text }}</van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  itemData: {
    type: Object,
    default: () => ({}),
  },
});

</script>

<style lang="less" scoped>
.item {
  margin-bottom: 10px;
  .swiper-wrapper {
    position: relative;

    .cover {
      width: 100%;
      border-radius: 6px;
    }

    .bottom {
      position: absolute;
      bottom: 15px;
      left: 10px;
      right: 10px;

      .msg-tip {
        display: inline-flex;
        align-items: center;
        background-color: hsla(0, 0%, 100%, 0.9);
        max-width: 55%;
        height: 17px;
        border-radius: 10px;
        padding-left: 6px;

        .score {
          color: #333;
          font-size: 14px;
          font-weight: 700;
          transform: scale(0.8);
          transform-origin: 0 center;
        }

        .text {
          color: #666;
          font-size: 12px;
          transform: scale(0.8);
          transform-origin: 0 center;
          margin-left: -2px;
          padding-left: 5px;
        }
      }
    }

    .side-bar {
      position: absolute;
      right: 10px;
      top: 25px;

      .tool-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        .heart,
        .msg-icon {
          width: 30px;
          height: 30px;
        }

        .heart {
          margin: 8px 0;
        }

        .message {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          .count {
          font-size: 14px;
          color: #fff;
          }
        }
      }
    }
  }

  .content {
    margin-top: 7px;

    .title {

      .desc {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        
        .name, .desc {
          font-size: 12px;
          color: #666;
        }

        .name {
          position: relative;
          margin: 0 10px;
        }

        .name::after {
          position: absolute;
          content: "";
          top: 40%;
          right: -25%;
          width: 2px;
          height: 2px;
          border-radius: 2px;
          background-color: #666;
        }
      }

      .house-name {
        margin: 8px 0;
        font-size: 18px;
        color: #000;
      }
    }

    .info {
      .tags {
        .discount {
          color: #f66;
          background-color: rgba(255, 102, 102, 0.1);
          margin-right: 6px;
        }
      }

      .price {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 6px;

        .new {
          color: var(--primary-color);
          font-size: 20px;
        }

        .old {
          text-decoration: line-through;
          font-size: 12px;
          color: #999;
          margin: 0 8px;
        }
      }
    }
  }
}
</style>
